<template>
  <div>
    <el-card v-if="route.query.id" class="box-card !border-none mb-[15px]" shadow="never">
        <el-page-header content="资金明细" :icon="ArrowLeft" @back="$router.back()" />
    </el-card>
    <!-- 列表 -->
    <f-table ref="tableRef" @register="register">
      <template #table-header>
        <el-row v-if="detail" class="mb-[15px]" :gutter="10">
            <el-col :span="8">
                <el-card class="text-center" shadow="hover">
                    <div class="text-[30px] font-bold">{{ Number(detail.chongzhi).toFixed(2) }}</div>
                    <div class="text-[#999]">总充值(元)</div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="text-center" shadow="hover">
                    <div class="text-[30px] font-bold">{{ Number(detail.hongbao).toFixed(2) }}</div>
                    <div class="text-[#999]">总发放红包(元)</div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="text-center" shadow="hover">
                    <div class="text-[30px] font-bold">{{ Number(detail.commisson).toFixed(2) }}</div>
                    <div class="text-[#999]">总分销(元)</div>
                </el-card>
            </el-col>
        </el-row>
      </template>
      <template #money="scoped">
        <span :class="Number(scoped.row.money)<0?'text-[red]':'text-[green]'">{{ scoped.row.money }}</span>
      </template>
      <template #type="scoped">
        <el-tag v-if="scoped.row.type=='chongzhi'">充值</el-tag>
        <el-tag v-if="scoped.row.type=='hongbao'" type="success">红包</el-tag>
        <el-tag v-if="scoped.row.type=='commission'" type="warning">分销</el-tag>
        <el-tag v-if="scoped.row.type=='zhuanchu'" type="success">转出</el-tag>
        <el-tag v-if="scoped.row.type=='zhuanru'" type="warning">转入</el-tag>
      </template>
    </f-table>
</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/store.financial-details'
import { getStoreAllApi, getStoreMoneyLogApi, getGroupTreeApi } from '@/addon/htscrm/api'
import { useRoute } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

const detail = ref<any>()
const route = useRoute()
const formItems = tableSearchFormItems(t)
const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    hideTableHeader: true,
    // searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<any>[],
    beforeFetch: (opt) => {
        if (!opt.store_id) {
            opt.store_id = route.query.id || 0
        }
        return opt
    },
    api: async (opt) => {
        const { list, sum_info: sumInfo } = (await getStoreMoneyLogApi(opt)).data
        detail.value = sumInfo
        return list
    }
})

async function getStoreList () {
    const res = await getStoreAllApi()
    formItems[0].value = Number(route.query.id) || 0
    formItems[0].childrenComponent.children = res.data.map(item => {
        return {
            label: item.title,
            value: item.id
        }
    })
    if (!route.query.id) {
        formItems[0].childrenComponent.children.unshift({ label: '全部门店', value: 0 })
    }
    methods.setFormItems(formItems)
}

async function getGroup () {
    const res = await getGroupTreeApi({ name: '' })
    formItems[2].value = Number(route.query.id) || 0
    formItems[2].childrenComponent.children = res.data.map(item => {
        return {
            label: item.name,
            value: item.id
        }
    })
    if (!route.query.id) {
        formItems[2].childrenComponent.children.unshift({ label: '全部分组', value: 0 })
    }
    methods.setFormItems(formItems)
}


onMounted(() => {
    getStoreList()
    getGroup()
})

</script>

<style lang="scss" scoped>
</style>
